<template>
	<div class="app-container">
		<div class="app-left-part">
			<router-view name="navigation" />
		</div>
		<div class="app-middle-part">
			<router-view name="breadcrumb" class="app-trajectory-part" />
			<router-view class="app-content-part" />
		</div>
		<div v-show="$store.state.options.navigation.user" class="app-right-part">
			<spread-tools />
		</div>
	</div>
</template>

<script>
	import SpreadTools from "./components/widgets/spread-tools.vue";

	export default {
		components: {
			SpreadTools
		},
		created() {
			this.$store.dispatch("options/checkUserIdentity");
			this.$store.commit("options/buildRouterDataset");
		}
	};
</script>

<style lang="scss">
	@import "./libs/styles/common.css";
	@import "./libs/styles/mulxdepota.scss";

	.app-container {
		width: 100%;
		height: 100vh;
		overflow: hidden;

		position: relative;
		display: flex;

		.app-middle-part {
			flex: 1;
			padding: 0rem 1.6rem;
            box-sizing: border-box;
            overflow-y: auto;
		}
	}

	.app-trajectory-part {
		padding: 1rem 0rem;
		border-bottom: 0.1rem solid $color-ash;
		align-items: center;
	}

	.app-content-part {
		margin: 3.2rem 0rem;
	}
</style>
